body,
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

@function r($px) {
    @return $px/40*1rem;
}

@mixin stranstion {
    -webkit-transition: all 1s;
    -ms-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
}

@mixin atranstion {
    -webkit-transition: all .2s;
    -ms-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
}

@mixin imgs {
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    margin: auto;
}

@mixin imga {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    margin: auto;
}

@mixin imgb {
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    margin: auto;
}

@mixin imgh {
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    margin: auto;
}

//一
.web {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .CoolDog {
        width: 100%;
        height: r(79);
        position: relative;
        .CoolDog_img {
            width: 34.66666666666667%;
            height: r(79);
            position: absolute;
            top: 0;
            right: 0;
            margin: 10px 15px 0 0;
            @include stranstion;
            img {
                width: 100%;
            }
        }
    }
    .GuessTheSong {
        width: 100%;
        position: relative;
        .GuessTheSong_box {
            width: 95.2%;
            height: r(540);
            margin: 0 auto;
            position: relative;
            margin-top: 30px;
            .GuessTheSong_top {
                width: 96%;
                height: r(238);
                margin: 0 auto;
                position: relative;
                img {
                    width: 100%;
                    position: absolute;
                    top: -500px;
                    left: -500px;
                    bottom: -500px;
                    right: -500px;
                    margin: auto;
                }
            }
            .GuessTheSong_bottom {
                width: 71%;
                height: r(184);
                margin: 0 auto;
                position: relative;
                top: -40px;
                img {
                    width: 100%;
                    position: absolute;
                    top: -500px;
                    left: -500px;
                    bottom: -500px;
                    right: -500px;
                    margin: auto;
                }
            }
        }
        .BigMouth {
            width: 88.2%;
            height: r(486);
            position: absolute;
            top: 150px;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0 auto;
            z-index: -1;
            .BigMouth_box {
                img {
                    width: 100%;
                }
            }
        }
        .figure {
            width: 97.86666666666667%;
            height: r(559);
            margin: 0 auto;
            position: relative;
            bottom: 70px;
            .figure_box {
                img {
                    width: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: 0 auto;
                }
            }
        }
        .GetStarted {
            width: 53.56164383561644%;
            height: r(128);
            margin: 0 auto;
            position: relative;
            bottom: 122px;
            z-index: 1;
            .GetStarted_box {
                animation: ks 1s infinite linear .9s;
                img {
                    width: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: 0 auto;
                }
            }
        }
    }
    .fot {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #fff;
        z-index: -1;
        img {
            position: absolute;
            top: -9999px;
            left: -9999px;
            bottom: -9999px;
            right: -9999px;
            margin: auto;
            animation: bj 4s linear .7s infinite;
        }
    }
}

@keyframes logo {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(.9);
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes ks {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(.9);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes flipInY {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
    }
    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    to {
        transform: perspective(400px);
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: flipInY;
}

@keyframes zoomInRight {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInRight {
    animation-name: zoomInRight;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomIn {
    animation-name: zoomIn;
}

@keyframes zoomInDown {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInDown {
    animation-name: zoomInDown;
}

.son {
    opacity: 1;
    animation-duration: 1.2s;
    animation-direction: initial;
}

.bon {
    opacity: 1;
    animation-duration: .8s;
    animation-direction: initial;
}

@keyframes bounceOutRight {
    20% {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(-2px, 0, 0);
    }
}

.bounceOutRight {
    animation-name: bounceOutRight;
}

@keyframes bj {
    0% {
        transform: rotateZ(0);
        background: #fff;
    }
    10% {
        background: #f4f4f4;
    }
    100% {
        transform: rotateZ(1turn);
        background: #fff;
    }
}

.Loadingpage .er_box input[type="checkbox"]:checked~.er_content {
    top: 0;
}

//加載頁
.Loadingpage {
    width: 100%;
    height: 100%;
    .er_box {
        width: 100%;
        height: 100%;
        input {
            display: none;
        }
        .er_content {
            width: 100%;
            height: 100%;
            top: -100%;
            left: 0;
            position: absolute;
            z-index: 2;
            background: #fff;
            @include atranstion;
            .er_content_hz {
                position: relative;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                .er_content_img {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    overflow: hidden;
                    z-index: 3;
                    img {
                        @include imgb;
                    }
                }
                .er_content_content1 {
                    width: r(663);
                    height: r(460);
                    position: absolute;
                    top: r(66);
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                    z-index: 8;
                    img {
                        @include imgs;
                    }
                }
                .er_content_content2 {
                    width: r(659);
                    height: r(960);
                    position: absolute;
                    top: r(66);
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                    z-index: 6;
                    img {
                        @include imgs;
                    }
                }
                .er_content_content3 {
                    width: r(257);
                    height: r(198);
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                    z-index: 6;
                    img {
                        @include imgs;
                    }
                }
                .er_content_content4 {
                    width: r(133);
                    height: r(79);
                    position: absolute;
                    bottom: r(27);
                    right: r(13);
                    z-index: 6;
                    img {
                        @include imgs;
                    }
                }
                .er_content_content5 {
                    width: r(113);
                    height: r(165);
                    position: absolute;
                    bottom: r(250);
                    right: r(13);
                    z-index: 6;
                    img {
                        @include imgs;
                    }
                }
                .er_content_content6 {
                    width: r(155);
                    height: r(114);
                    position: absolute;
                    bottom: r(199);
                    left: r(236);
                    z-index: 6;
                    img {
                        @include imgs;
                    }
                }
                .er_content_content_bottoms {
                    width: r(598);
                    height: r(290);
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    z-index: 5;
                    img {
                        @include imgs;
                    }
                }
            }
        }
    }
}

//二
.er .er_box input[type="checkbox"]:checked~.er_content {
    top: 0;
}

.er {
    width: 100%;
    height: 100%;
    .er_box {
        width: 100%;
        height: 100%;
        input {
            display: none;
        }
        .er_content {
            width: 100%;
            height: 100%;
            top: 100%;
            left: 0;
            position: absolute;
            z-index: 2;
            background: #fff;
            @include atranstion;
            .er_content_hz {
                position: relative;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                .er_content_img {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    overflow: hidden;
                    z-index: 3;
                    img {
                        @include imgs;
                    }
                }
                .er_content_box {
                    width: r(600);
                    height: 100%;
                    margin: 0 auto;
                    position: relative;
                    z-index: 4;
                    .er_content_top {
                        width: r(500);
                        height: r(212);
                        overflow: hidden;
                        position: relative;
                        margin: 0 auto;
                        top: r(-8);
                        img {
                            @include imgs;
                        }
                    }
                    .er_content_center {
                        position: relative;
                        top: r(-100);
                        .er_content_center_top {
                            width: r(424);
                            height: r(260);
                            position: relative;
                            overflow: hidden;
                            img {
                                @include imgs;
                            }
                        }
                        .er_content_center_bottom {
                            width: 100%;
                            height: r(380);
                            position: relative;
                            overflow: hidden;
                            top: r(-70);
                            img {
                                @include imgs;
                            }
                        }
                    }
                    .er_content_bottom {
                        width: r(600);
                        margin: 0 auto;
                        display: flex;
                        justify-content: space-between;
                        position: relative;
                        left: 0;
                        bottom: r(60);
                        .er_content_bottom_left {
                            .er_content_bottom_A,
                            .er_content_bottom_B,
                            .er_content_bottom_C {
                                width: r(465);
                                height: r(93);
                                position: relative;
                                overflow: hidden;
                                margin-bottom: r(22);
                                img {
                                    @include imgs;
                                }
                            }
                        }
                        .er_content_bottom_right {
                            .er_content_bottom_right_shij {
                                width: r(120);
                                position: relative;
                                top: 0;
                                left: 0;
                                img {
                                    width: 100%;
                                }
                            }
                            .er_content_bottom_right_you {
                                width: r(80);
                                position: relative;
                                bottom: 0;
                                left: 0;
                                margin: 0 auto;
                                img {
                                    position: absolute;
                                    left: 0;
                                    right: 0;
                                    margin: 0 auto;
                                    width: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

//三
.san .er_box input[type="checkbox"]:checked~.er_content {
    left: 0;
}

.san {
    width: 100%;
    height: 100%;
    .er_box {
        width: 100%;
        height: 100%;
        input {
            display: none;
        }
        .er_content {
            width: 100%;
            height: 100%;
            top: 0;
            left: -100%;
            position: absolute;
            z-index: 2;
            background: #fff;
            @include atranstion;
            .er_content_hz {
                position: relative;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                .er_content_img {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    overflow: hidden;
                    z-index: 3;
                    img {
                        @include imgs;
                    }
                }
                .Bdai {
                    width: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 5;
                    .Bdai_Bdai {
                        width: r(657);
                        height: r(222);
                        top: r(20);
                        left: 0;
                        position: relative;
                        margin: 0 auto;
                        img {
                            @include imgs;
                        }
                    }
                    .Bdai_box {
                        width: 100%;
                        height: r(682);
                        top: 0;
                        left: 0;
                        z-index: 4;
                        position: relative;
                        img {
                            @include imgs;
                        }
                    }
                }
                .er_content_box {
                    width: r(600);
                    height: 100%;
                    margin: 0 auto;
                    position: relative;
                    z-index: 5;
                    .er_content_top {
                        width: r(500);
                        height: r(212);
                        overflow: hidden;
                        position: relative;
                        margin: 0 auto;
                        top: r(-8);
                        img {
                            @include imgs;
                        }
                    }
                    .er_content_center {
                        position: relative;
                        top: r(-100);
                        .er_content_center_top {
                            width: r(424);
                            height: r(260);
                            position: relative;
                            overflow: hidden;
                            img {
                                @include imgs;
                            }
                        }
                        .er_content_center_bottom {
                            width: 100%;
                            height: r(380);
                            position: relative;
                            overflow: hidden;
                            top: r(-70);
                            img {
                                @include imgs;
                            }
                        }
                    }
                    .er_content_bottom {
                        width: r(600);
                        margin: 0 auto;
                        display: flex;
                        justify-content: space-between;
                        position: absolute;
                        left: 0;
                        bottom: r(60);
                        .er_content_bottom_left {
                            .er_content_bottom_A,
                            .er_content_bottom_B,
                            .er_content_bottom_C {
                                width: r(465);
                                height: r(93);
                                position: relative;
                                overflow: hidden;
                                margin-bottom: r(22);
                                img {
                                    @include imgs;
                                }
                            }
                        }
                        .er_content_bottom_right {
                            .er_content_bottom_right_shij {
                                width: r(120);
                                position: relative;
                                top: 0;
                                left: 0;
                                img {
                                    width: 100%;
                                }
                            }
                            .er_content_bottom_right_you {
                                width: r(80);
                                position: relative;
                                bottom: 0;
                                left: 0;
                                margin: 0 auto;
                                img {
                                    position: absolute;
                                    left: 0;
                                    right: 0;
                                    margin: 0 auto;
                                    width: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

//四
.si .er_box input[type="checkbox"]:checked~.er_content {
    left: 0;
}

.si {
    width: 100%;
    height: 100%;
    .er_box {
        width: 100%;
        height: 100%;
        input {
            display: none;
        }
        .er_content {
            width: 100%;
            height: 100%;
            top: 0;
            left: 100%;
            position: absolute;
            z-index: 2;
            background: #fff;
            @include atranstion;
            .er_content_hz {
                position: relative;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                .er_content_img {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    overflow: hidden;
                    z-index: 3;
                    img {
                        @include imgs;
                    }
                }
                .Bdai {
                    width: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 5;
                    .Bdai_Bdai {
                        width: r(657);
                        height: r(222);
                        top: r(-4);
                        left: 0;
                        position: relative;
                        margin: 0 auto;
                        img {
                            @include imgs;
                        }
                    }
                    .Bdai_box {
                        width: 100%;
                        top: r(-80);
                        left: 0;
                        z-index: 5;
                        height: r(680);
                        position: relative;
                        .Bdai_box_img1 {
                            width: 100%;
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            .Bdai_box_img1_hz {
                                height: r(256);
                                position: relative;
                                img {
                                    @include imgs;
                                }
                            }
                        }
                        .Bdai_box_img2 {
                            width: 100%;
                            position: absolute;
                            left: 0;
                            top: 0;
                            .Bdai_box_img2_hz {
                                height: r(532);
                                position: relative;
                                img {
                                    @include imgs;
                                }
                            }
                        }
                        .Bdai_box_img3 {
                            width: r(532);
                            position: absolute;
                            left: 0;
                            top: r(200);
                            .Bdai_box_img3_hz {
                                height: r(532);
                                position: relative;
                                img {
                                    @include imgs;
                                }
                            }
                        }
                        .Bdai_box_img4 {
                            width: r(618);
                            position: absolute;
                            right: r(62);
                            top: 0;
                            .Bdai_box_img4_hz {
                                height: r(678);
                                position: relative;
                                img {
                                    @include imgs;
                                }
                            }
                        }
                        .Bdai_box_img5 {
                            width: r(420);
                            position: absolute;
                            right: 0;
                            bottom: r(26);
                            .Bdai_box_img5_hz {
                                height: r(352);
                                position: relative;
                                img {
                                    @include imgs;
                                }
                            }
                        }
                    }
                }
                .er_content_box {
                    width: r(600);
                    height: 100%;
                    margin: 0 auto;
                    position: relative;
                    z-index: 5;
                    .er_content_top {
                        width: r(500);
                        height: r(212);
                        overflow: hidden;
                        position: relative;
                        margin: 0 auto;
                        top: r(-8);
                        img {
                            @include imgs;
                        }
                    }
                    .er_content_center {
                        position: relative;
                        top: r(-100);
                        .er_content_center_top {
                            width: r(424);
                            height: r(260);
                            position: relative;
                            overflow: hidden;
                            img {
                                @include imgs;
                            }
                        }
                        .er_content_center_bottom {
                            width: 100%;
                            height: r(380);
                            position: relative;
                            overflow: hidden;
                            top: r(-70);
                            img {
                                @include imgs;
                            }
                        }
                    }
                    .er_content_bottom {
                        width: r(600);
                        margin: 0 auto;
                        display: flex;
                        justify-content: space-between;
                        position: absolute;
                        left: 0;
                        bottom: r(60);
                        .er_content_bottom_left {
                            .er_content_bottom_A,
                            .er_content_bottom_B,
                            .er_content_bottom_C {
                                width: r(465);
                                height: r(93);
                                position: relative;
                                overflow: hidden;
                                margin-bottom: r(22);
                                img {
                                    @include imgs;
                                }
                            }
                        }
                        .er_content_bottom_right {
                            .er_content_bottom_right_shij {
                                width: r(120);
                                position: relative;
                                top: 0;
                                left: 0;
                                img {
                                    width: 100%;
                                }
                            }
                            .er_content_bottom_right_you {
                                width: r(80);
                                position: relative;
                                bottom: 0;
                                left: 0;
                                margin: 0 auto;
                                img {
                                    position: absolute;
                                    left: 0;
                                    right: 0;
                                    margin: 0 auto;
                                    width: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.wu .er_box input[type="checkbox"]:checked~.er_content {
    top: 0;
}

//五
.wu {
    width: 100%;
    height: 100%;
    .er_box {
        width: 100%;
        height: 100%;
        input {
            display: none;
        }
        .er_content {
            width: 100%;
            height: 100%;
            top: 100%;
            left: 0;
            position: absolute;
            z-index: 2;
            background: #fff;
            @include atranstion;
            .er_content_hz {
                position: relative;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                .er_content_img {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    overflow: hidden;
                    z-index: 3;
                    img {
                        @include imgb;
                    }
                }
                .er_content_box {
                    width: r(600);
                    height: 100%;
                    margin: 0 auto;
                    position: relative;
                    z-index: 4;
                    .er_content_top {
                        width: r(506);
                        height: r(323);
                        overflow: hidden;
                        position: relative;
                        top: r(28);
                        img {
                            @include imgs;
                        }
                    }
                    .er_content_center {
                        position: relative;
                        left: 0;
                        width: 100%;
                        .er_content_center_top {
                            width: r(380);
                            height: r(485);
                            position: absolute;
                            overflow: hidden;
                            left: 0;
                            top: 0;
                            img {
                                @include imgs;
                            }
                        }
                        .er_content_center_bottom {
                            width: r(320);
                            height: r(550);
                            position: absolute;
                            overflow: hidden;
                            top: r(-80);
                            right: 0;
                            img {
                                @include imgs;
                            }
                        }
                    }
                    .er_content_bottom {
                        width: r(600);
                        margin: 0 auto;
                        display: flex;
                        justify-content: space-between;
                        position: absolute;
                        left: 0;
                        bottom: r(60);
                        .er_content_bottom_left {
                            .er_content_bottom_A,
                            .er_content_bottom_B,
                            .er_content_bottom_C {
                                width: r(465);
                                height: r(93);
                                position: relative;
                                overflow: hidden;
                                margin-bottom: r(22);
                                img {
                                    @include imgs;
                                }
                            }
                        }
                        .er_content_bottom_right {
                            .er_content_bottom_right_shij {
                                width: r(120);
                                position: relative;
                                top: 0;
                                left: 0;
                                img {
                                    width: 100%;
                                }
                            }
                            .er_content_bottom_right_you {
                                width: r(80);
                                position: relative;
                                bottom: 0;
                                left: 0;
                                margin: 0 auto;
                                img {
                                    position: absolute;
                                    left: 0;
                                    right: 0;
                                    margin: 0 auto;
                                    width: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

//六
.liu .er_box input[type="checkbox"]:checked~.er_content {
    left: 0;
}

.liu {
    width: 100%;
    height: 100%;
    .er_box {
        width: 100%;
        height: 100%;
        input {
            display: none;
        }
        .er_content {
            width: 100%;
            height: 100%;
            top: 0;
            left: 100%;
            position: absolute;
            z-index: 2;
            background: #fff;
            @include atranstion;
            .er_content_hz {
                position: relative;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                .er_content_img {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    overflow: hidden;
                    z-index: 3;
                    img {
                        @include imga;
                    }
                }
                .liu_box {
                    width: 100%;
                    height: r(788);
                    position: absolute;
                    top: 0;
                    left: 0;
                    .liu_box_img {
                        width: 100%;
                        height: r(536);
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        z-index: 3;
                        img {
                            @include imgs;
                        }
                    }
                    .liu_box_gew {
                        width: r(512);
                        height: r(640);
                        position: absolute;
                        bottom: r(20);
                        left: 0;
                        right: 0;
                        margin: 0 auto;
                        z-index: 3;
                        img {
                            @include imgs;
                        }
                    }
                }
                .er_content_box {
                    width: r(600);
                    height: 100%;
                    margin: 0 auto;
                    position: relative;
                    z-index: 5;
                    .er_content_top {
                        width: r(500);
                        height: r(212);
                        overflow: hidden;
                        position: relative;
                        margin: 0 auto;
                        top: r(-8);
                        img {
                            @include imgs;
                        }
                    }
                    .er_content_center {
                        position: relative;
                        top: r(-100);
                        .er_content_center_top {
                            width: r(424);
                            height: r(260);
                            position: relative;
                            overflow: hidden;
                            img {
                                @include imgs;
                            }
                        }
                        .er_content_center_bottom {
                            width: 100%;
                            height: r(380);
                            position: relative;
                            overflow: hidden;
                            top: r(-70);
                            img {
                                @include imgs;
                            }
                        }
                    }
                    .er_content_bottom {
                        width: r(600);
                        margin: 0 auto;
                        display: flex;
                        justify-content: space-between;
                        position: absolute;
                        left: 0;
                        bottom: r(60);
                        .er_content_bottom_left {
                            .er_content_bottom_A,
                            .er_content_bottom_B,
                            .er_content_bottom_C {
                                width: r(465);
                                height: r(93);
                                position: relative;
                                overflow: hidden;
                                margin-bottom: r(22);
                                img {
                                    @include imgs;
                                }
                            }
                        }
                        .er_content_bottom_right {
                            .er_content_bottom_right_shij {
                                width: r(120);
                                position: relative;
                                top: 0;
                                left: 0;
                                img {
                                    width: 100%;
                                }
                            }
                            .er_content_bottom_right_you {
                                width: r(80);
                                position: relative;
                                bottom: 0;
                                left: 0;
                                margin: 0 auto;
                                img {
                                    position: absolute;
                                    left: 0;
                                    right: 0;
                                    margin: 0 auto;
                                    width: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

//七
.qi .er_box input[type="checkbox"]:checked~.er_content {
    top: 0;
}

.qi {
    width: 100%;
    height: 100%;
    .er_box {
        width: 100%;
        height: 100%;
        input {
            display: none;
        }
        .er_content {
            width: 100%;
            height: 100%;
            top: -100%;
            left: 0;
            position: absolute;
            z-index: 2;
            background: #fff;
            @include atranstion;
            .er_content_hz {
                position: relative;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                .er_content_img {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    overflow: hidden;
                    z-index: 3;
                    img {
                        @include imga;
                    }
                }
                .qi_yx {
                    width: r(652);
                    height: r(270);
                    position: absolute;
                    top: r(-6);
                    right: -30%;
                    z-index: 3;
                    img {
                        @include imgs;
                    }
                }
                .liu_box {
                    width: 100%;
                    height: r(788);
                    position: absolute;
                    top: 0;
                    left: 0;
                    .liu_box_img {
                        width: 100%;
                        height: r(536);
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        z-index: 3;
                        img {
                            @include imgs;
                        }
                    }
                    .liu_box_gew {
                        width: r(512);
                        height: r(640);
                        position: absolute;
                        bottom: r(20);
                        left: 0;
                        right: 0;
                        margin: 0 auto;
                        z-index: 3;
                        img {
                            @include imgs;
                        }
                    }
                }
                .er_content_box {
                    width: r(600);
                    height: 100%;
                    margin: 0 auto;
                    position: relative;
                    z-index: 5;
                    .er_content_top {
                        width: r(500);
                        height: r(212);
                        overflow: hidden;
                        position: relative;
                        margin: 0 auto;
                        top: r(-8);
                        img {
                            @include imgs;
                        }
                    }
                    .er_content_center {
                        position: relative;
                        top: r(-100);
                        .er_content_center_top {
                            width: r(424);
                            height: r(260);
                            position: relative;
                            overflow: hidden;
                            img {
                                @include imgs;
                            }
                        }
                        .er_content_center_bottom {
                            width: 100%;
                            height: r(380);
                            position: relative;
                            overflow: hidden;
                            top: r(-70);
                            img {
                                @include imgs;
                            }
                        }
                    }
                    .er_content_bottom {
                        width: r(600);
                        margin: 0 auto;
                        display: flex;
                        justify-content: space-between;
                        position: absolute;
                        left: 0;
                        bottom: r(60);
                        .er_content_bottom_left {
                            .er_content_bottom_A,
                            .er_content_bottom_B,
                            .er_content_bottom_C {
                                width: r(465);
                                height: r(93);
                                position: relative;
                                overflow: hidden;
                                margin-bottom: r(22);
                                img {
                                    @include imgs;
                                }
                            }
                        }
                        .er_content_bottom_right {
                            .er_content_bottom_right_shij {
                                width: r(120);
                                position: relative;
                                top: 0;
                                left: 0;
                                img {
                                    width: 100%;
                                }
                            }
                            .er_content_bottom_right_you {
                                width: r(80);
                                position: relative;
                                bottom: 0;
                                left: 0;
                                margin: 0 auto;
                                img {
                                    position: absolute;
                                    left: 0;
                                    right: 0;
                                    margin: 0 auto;
                                    width: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

//八
.ba .er_box input[type="checkbox"]:checked~.er_content {
    top: 0;
}

.ba {
    width: 100%;
    height: 100%;
    .er_box {
        width: 100%;
        height: 100%;
        input {
            display: none;
        }
        .er_content {
            width: 100%;
            height: 100%;
            top: -100%;
            left: 0;
            position: absolute;
            z-index: 2;
            background: #fff;
            @include atranstion;
            .er_content_hz {
                position: relative;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                .er_content_img {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    overflow: hidden;
                    z-index: 3;
                    img {
                        @include imga;
                    }
                }
                .qi_yx {
                    width: r(652);
                    height: r(270);
                    position: absolute;
                    top: r(-6);
                    right: -30%;
                    z-index: 3;
                    img {
                        @include imgs;
                    }
                }
                .liu_box {
                    width: 100%;
                    height: r(788);
                    position: absolute;
                    top: 0;
                    left: 0;
                    .liu_box_img {
                        width: 100%;
                        height: r(536);
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        z-index: 3;
                        img {
                            @include imgb;
                        }
                    }
                }
                .er_content_box {
                    width: r(630);
                    height: 100%;
                    margin: 0 auto;
                    position: relative;
                    z-index: 5;
                    .er_content_top {
                        width: r(262);
                        height: r(90);
                        overflow: hidden;
                        position: absolute;
                        top: r(20);
                        left: 0;
                        img {
                            @include imgs;
                        }
                    }
                    .er_content_right {
                        width: r(262);
                        height: r(78);
                        overflow: hidden;
                        position: absolute;
                        top: r(20);
                        right: 0;
                        img {
                            @include imgs;
                        }
                    }
                    .er_content_center {
                        position: absolute;
                        top: r(116);
                        width: r(231);
                        height: r(269);
                        overflow: hidden;
                        left: 0;
                        right: 0;
                        margin: 0 auto;
                        img {
                            @include imgs;
                        }
                    }
                    .er_content_caiz {
                        position: absolute;
                        top: r(380);
                        width: r(340);
                        height: r(102);
                        left: 0;
                        right: 0;
                        margin: 0 auto;
                        overflow: hidden;
                        img {
                            @include imgs;
                        }
                    }
                    .er_content_content {
                        position: absolute;
                        top: r(492);
                        height: r(200);
                        left: 0;
                        right: 0;
                        margin: 0 auto;
                        overflow: hidden;
                        img {
                            @include imgs;
                        }
                    }
                    .er_content_Zctz {
                        position: absolute;
                        top: r(710);
                        width: r(282);
                        height: r(108);
                        left: r(22);
                        overflow: hidden;
                        img {
                            @include imgb;
                        }
                    }
                    .er_content_fx {
                        position: absolute;
                        top: r(710);
                        width: r(282);
                        height: r(102);
                        right: r(22);
                        overflow: hidden;
                        img {
                            @include imgb;
                        }
                    }
                    .er_content_ph {
                        position: absolute;
                        top: r(840);
                        width: r(417);
                        height: r(119);
                        right: 0;
                        left: 0;
                        margin: 0 auto;
                        overflow: hidden;
                        z-index: 10;
                        img {
                            @include imgs;
                        }
                    }
                    .er_content_py {
                        position: absolute;
                        width: r(630);
                        top: r(906);
                        height: r(282);
                        right: 0;
                        left: 0;
                        margin: 0 auto;
                        overflow: hidden;
                        img {
                            @include imgs;
                        }
                    }
                }
            }
        }
    }
}